// 新闻详情
import React, { useEffect } from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { useLocation } from 'react-router';
import { parse } from 'qs';
import moment from 'moment';
import * as detailApi from '~/apis/news/addApi';
import './index.local.sass';

const NewsDetails = observer(() => {
  const location = useLocation();
  const querryParams = parse(location.search, { ignoreQueryPrefix: true });

  const state = useLocalStore(() => ({
    newsId: querryParams.id || '',
    newsInfo: '' as any,
    fileUrlPrefix: '', // 文件地址前缀
    mainPicUrl: '', // 图片
  }));

  // 获取新闻详情
  const getNewsInfo = () => {
    detailApi.getNewsInfo(state.newsId).then((res) => {
      state.newsInfo = res.data ? res.data : null; // 新闻详情
      state.fileUrlPrefix = res.file_prefix; // 文件地址前缀
      if (res.data && res.data.mainPicUrl) {
        state.mainPicUrl = `${res.file_prefix as string}${res.data.mainPicUrl as string}`; // 图片
      }
    });
  };
  useEffect(() => {
    getNewsInfo();
  }, []);

  const newsInfo: any = state.newsInfo;

  return (
    <div>
      <div className='detail-container'>
        <h2>{newsInfo.title ? newsInfo.title : ''}</h2>
        <div className='detail-tag'>
          <span><em>Authors: </em> {newsInfo.author ? newsInfo.author : ''}</span>
          <span><em>Country/Region: </em> {newsInfo.countryName ? newsInfo.countryName : ''}</span>
          <span><em>Date: </em> {newsInfo.createTime ? moment(newsInfo.createTime).format('YYYY/MM/DD') : ''}</span>
        </div>
        <img src={ state.mainPicUrl } alt=''/>
        <div className='detail-content'>
          {/* <p>
            {newsInfo.content ? newsInfo.content : ''}
          </p> */}
          <div dangerouslySetInnerHTML={{ __html: newsInfo.allContent }}/>
        </div>
      </div>
    </div>
  );
});

export default NewsDetails;
